<template>
  <ul v-if="!shops.length" style="width:100%">
    <li v-for="item in 10" :key="item" class="list_back_li">
      <img src="../../images/shopback.svg" class="list_back_svg">
    </li>
  </ul>
  <ul v-else>
    <li class="item" v-for="item in shops" :key="item.id" @click="navShop(item.id)">
      <img class="item-img" :src="shopImgOrigin + item.image_path" alt="">
      <div class="item-info-box">
        <!-- 顶部 -->
        <div class="info-top">
          <span class="shopname">{{item.name}}</span>
          <ul class="intime-ticket">
            <li>保</li>
            <li>准</li>
            <li>票</li>
          </ul>
        </div>
        <!-- 中间 -->
        <div class="info-mid">
          <van-rate v-model="item.rating" 
            color="#ff9a0d"
            size=".1rem"
            allow-half
            readonly>
          </van-rate>
          <span class="rate-value">{{item.rating}}</span>
          <span class="sale-volume">月售{{item.recent_order_num}}单</span>
          <div :class="item.delivery_mode?'dilevers margin_1': 'dilevers margin_2' " >
            <span v-if="item.delivery_mode">
              {{item.delivery_mode.text}}
            </span>
            <span>准时达到</span>
          </div>
        </div>
        <!-- 底部 -->
        <div class="info-bottom">
          <p class="fee">¥{{item.float_minimum_order_amount}}起送<span> / </span>配送费约¥{{item.float_delivery_fee}}</p>
          <p class="distance_time"><span>{{item.distance}} / </span> <span>{{item.order_lead_time}}</span></p>
        </div>
      </div>
    </li>
  </ul>
  
</template>
<script>
export default {
  props:{
    shops:Array
  },
  
  data(){
    return {
      shopImgOrigin:'http://elm.cangdu.org/img/'
    }
  },
  methods:{
    navShop(id){
      this.$router.push({path:'/shop',query:{id}})
    }
  }

}
</script>
<style lang='scss' scoped>
@import '../../styles/var.scss';
@import '../../styles/mixin.scss';
.list_back_li{
  width: 100%;
  height: auto;
  .list_back_svg{
    width: 100%;
    height: auto;
  }
}
.item{
  display: flex;
  flex-direction: row;
  padding: .16rem 0.1rem;
  border-bottom: .005rem solid #f1f1f1;
  .item-img{
    width: .62rem;
    height: .62rem;
    border-radius: 4px;
  }
  .item-info-box{
    height: .62rem;
    display: flex;  
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 0.1rem;
    // 顶部
    .info-top{
      color: #222;
      position: relative;
      .shopname{
        font-size: .16rem;
        font-weight: 600;
        display: inline-block;
        width: 2.4rem;
        @include text-ellipsis;
      }
      // 伪元素
      .shopname:before{
        content: '品牌';
        display: inline-block;
        background-color: #ffd930;
        padding: .01rem .02rem;
        border-radius: 10%;
        font-size: .12rem;
        font-weight: 600;
        color: #333;
        margin-right: .1rem;
      }
      .intime-ticket{
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        li{
          // 字体有最小的尺寸，若要更小，通过scale()实现
          font-size: .12rem;
          transform: scale(.8);
          color: #999;
          border: 0.002rem solid #eee;
        }
      }
    }
    // 中间
    .info-mid{
      font-size: .12rem;
      display: flex;
      flex-direction: row;
      position: relative;
      .rate-value{
        margin-left: .1rem;
        color: #ff6000;
      }
      .sale-volume{
        transform: scale(.8);
      }
      .dilevers{
        position: absolute;
        top: 0;
        right: 0;
        transform: scale(.7);
        :first-child{
          color: #FFF;
          background-color: $primary;
          padding: .01rem .02rem;
          border-radius: 5%;
        }
        :last-child{
          color: $primary;
          background-color: #FFF;
          padding: .01rem .01rem;
          border: .003rem solid $primary;
          border-radius: 5%;
        }
      }
    }
    // 底部
    .info-bottom{
      font-size: .12rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .fee{
        transform: scale(.9);
        margin-left: -.04rem;
      }
      .distance_time{
        transform: scale(.9);
        margin-right: -.04rem;
        :first-child{
          color: $grey;
        }
        :last-child{
          color:$primary;
        }
      }
    }
  }
  
}

.margin_1{
  margin-right: -.14rem;
}
.margin_2{
  margin-right: -.06rem;
}
</style>